<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>块级代码的作用</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- v-if及v-else形成条件语句判断操作 -->
            <p v-if="show">You can see me!</p>
            <p v-else>Now you see me!</p>
            <!-- TODO:如果包含多个元素，并不想进行嵌套包含元素设置，如何处理-->
            <p>Do you also see me?</p>
            <button @click="show = !show">Switch</button>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    show: true,
                },
            });
        </script>
    </body>
</html>
